<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title th:text="${#authentication.name}"></title>
	<script src="webjars/jquery/jquery.min.js"></script>
	<style type="text/css">
		#hints .selected {
			background: lightgreen;
		}
		#hints .unselected {
			cursor: pointer;
		}
		#hints .hint:not(:first-child) {
			margin-left: 5px;
		}
	</style>
</head>
<body>
<div>
	<div style="float: left;">
		<textarea rows="25" cols="120" id="json"></textarea>
		<div id="hints"></div>
	</div>
	<div style="float: left;margin-left: 10px;">
		<form 
			style="color: #fff;cursor: pointer;"
			th:action="@{/logout}" method="post" onclick="this.submit();">
			<button type="submit" style="background-color: black;color: #fff;cursor: pointer;">注销</button>
		</form>
	</div>
</div>
<script type="text/javascript">
	window.CTX = window.ctx = "[(@{/})]".substr(0, "[(@{/})]".length - 1);
	$(document).ajaxSend(function(event, jqxhr, settings) { 
		jqxhr.setRequestHeader("[(${_csrf.headerName})]", "[(${_csrf.token})]");
	});
	
	function updateHint (hint) {
		$.post("session/updateHint", { hint: hint }, function(resp, status) {
			location.reload(true);
		});
	}
	
	$(function () {
		$.get("session/getUserInfo?userId=[(${#authentication.principal.userId})]", function(resp, status) {
	        $("#json").html(JSON.stringify(resp.data, null, 2));
	        $.get("session/getAllHints", function(result, status) {
	 	       for (var i = 0; i < result.data.length; i++) {
	 	    	   var hint = result.data[i];
	 	    	   if (resp.data.hint === hint) {
	 	    		  $("#hints").append("<button class='hint selected'>" + hint + "</button>");
	 	    	   } else {
	 	    		  $("#hints").append("<button class='hint unselected' onclick='updateHint(\"" + hint + "\");'>" + hint + "</button>");
	 	    	   }
	 	       }
	 	    });
	    });
	});
</script>
</body>
</html>